<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular + SSM + Maven多模块开发</title>
    <!--引入bootstrap样式-->
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!--引入分页的样式-->
    <link rel="stylesheet" href="plugins/angularjs/pagination.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!--1.引入angularjs的库-->
    <script src="plugins/angularjs/angular.min.js"></script>
    <!--引入angularjs的分页库-->
    <script src="plugins/angularjs/pagination.js"></script>
    <!--引入分页的app模块-->
    <script src="plugins/js/base-pagination.js"></script>
    <!--引入studentService模块-->
    <script src="plugins/js/studentService.js"></script>
    <!--引入studentController模块-->
    <script src="plugins/js/studentController.js"></script>
    <style>
        .table{
            text-align: center;
        }
        .container{
            margin-top: 20px;
        }
        .form-inline{
            padding: 10px;
            padding-left:55px;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="studentController">
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">学生列表</h3>
            </div>

            {{searchEntity}}
                <!--条件查询+分页功能实现-->
                <div class="form-inline">
                    学生姓名:<input type="text" ng-model="searchEntity.sname" class="form-control">
                    学生住址:<input type="text" ng-model="searchEntity.addr" class="form-control">
                    所在班级：
                    <select class="form-control" ng-model="searchEntity.cid"
                            ng-options="c.cid as c.cname for c in classes">
                        <option value="">所有班级</option>
                    </select>
                    <!--<select class="form-control" ng-model="searchEntity.cid" >-->
                        <!--<option ng-repeat="c in classes" value="{{c.cid}}">{{c.cname}}</option>-->
                        <!--<option value="0">所有班级</option>-->
                    <!--</select>-->
                    <input type="button" value="查询" class="btn btn-primary btn-sm" ng-click="search()">
                    <input type="button" value="添加" class="btn btn-success btn-sm" ng-click="addUI()">
                    <input type="button" value="批量删除" class="btn btn-danger btn-sm" ng-click="batchDel()">
                </div>
                <table class="table table-hover table-striped">
                    <tr>
                        <td>是否删除</td>
                        <td>学生姓名</td>
                        <td>性别</td>
                        <td>年龄</td>
                        <td>住址</td>
                        <td>出生日期</td>
                        <td>所在班级</td>
                        <td>操作</td>
                    </tr>
                    <tr ng-repeat="stud in list">
                        <td><input type="checkbox" ng-click="selectStuds(stud.sid,$event)"></td>
                        <td>{{stud.sname}}</td>
                        <td>{{stud.sex}}</td>
                        <td>{{stud.age}}</td>
                        <td>{{stud.addr}}</td>
                        <td>{{procDate(stud.birth)}}</td>
                        <td>{{stud.cname}}</td>
                        <td>
                            <a href="#" class="btn btn-success btn-sm" ng-click="updateUI(stud)">修改</a>
                            <a href="#" class="btn btn-info btn-sm" ng-click="del(stud.sid)" >删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="8">
                            <!--添加分页导航-->
                            <tm-pagination conf="paginationConf"></tm-pagination>
                        </td>
                    </tr>
                </table>
        </div>
    </div>

<!--定义模态框（用于添加、修改学生）-->
    <!-- Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" >
                        <span >&times;</span>
                    </button>
                    <h4 class="modal-title" >编辑学生</h4>
                </div>
                <div class="modal-body">
                    {{entity}}
                    <!--添加要编辑的学生信息-->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">学生姓名</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="entity.sname" class="form-control" placeholder="学生姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">学生性别</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
                                        <input type="radio" ng-model="entity.sex" value="男"  name="sex">男
                                    </label>
                                    <label>
                                        <input type="radio" ng-model="entity.sex" value="女" name="sex">女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">学生年龄</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="entity.age" class="form-control" placeholder="学生年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">出生日期</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="entity.birth" class="form-control" placeholder="出生日期">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">家庭住址</label>
                            <div class="col-sm-10">
                                <input type="text" ng-model="entity.addr" class="form-control" placeholder="家庭住址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">所在班级</label>
                            <div class="col-sm-10">
                                <select class="form-control" ng-model="entity.cid">
                                    <option ng-repeat="c in classes" value="{{c.cid}}">{{c.cname}}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="save()">保存</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>